{% extends 'wxchat/wxbase.html' %}{% load static %}

{% block tab %}
    <form action="#" method="get" enctype="multipart/form-data" >{% csrf_token %}
    <div class="weui-tab" id="tab">
        <div class="weui-tab__content weui-tab__panel_active" >
            <div class="weui-panel weui-panel_access">
                <div class="weui-panel__hd">
                    <div class="weui-flex">
                        <div><a href="javascript:window.history.back(-1)"><i class="icon iconfont icon-jiantou3 gray " ></i></a></div>
                        <div class="weui-flex__item" style="text-align: center;"><span class="detail_title">购物车</span></div>
                        <div ><a href="{% url 'shopping-list' %}?next={{ request.get_full_path }}"><i class="icon iconfont icon-shangcheng10 pink r" ></i></a></div>
                     </div>
                </div>
                <div class="weui-panel__bd">
                    <div class="weui-cell weui-cell_access">
                        <div class="weui-cell__hd">
                            <div class="weui-cells_checkbox" >
                              <label class="weui-check__label" for="selectAll" >
                                  <input type="checkbox" class="weui-check" name="checkall" id="selectAll" {% if checkAll %} checked {% endif %}>
                                  <i class="weui-icon-checked"></i>
                              </label>
                              <i class="icon iconfont icon-shangcheng2" ></i> {{ project_name }}
                            </div>
                        </div>
                        <div class="weui-cell__bd">
                            <span  class="r" id="clear_cart">清空</span>
                        </div>
                    </div>
                    {% for cart in carts_list %}
                    <div class="weui-media-box weui-media-box_appmsg" id="item-{{ cart.goods.id }}" style="background-color: #fafafa">
                            <div class="weui-cells_checkbox" >
                              <label class="weui-check__label" for="id-{{ cart.goods.id }}" >
                                  <input type="checkbox" class="weui-check" name="checkid" id="id-{{ cart.goods.id }}" data-item="{{ cart.goods.id }}" {% if cart.status == 1 %} checked="true" {% endif %}>
                                  <i class="weui-icon-checked"></i>
                              </label>
                            </div>
                            {% if cart.goods.images %}
							<div class="weui-media-box__hd">
								 <img class="weui-media-box__thumb" src="{{ cart.goods.images.url }}" alt="">
							</div>
                            {% else %}
                            <div class="weui-media-box__hd">
                                 <i class="icon iconfont icon-pets  weui-media-box__thumb" ></i>
							</div>
                            {% endif %}
							<div class="weui-media-box__bd">
                                <h4 class="weui-media-box__title">{{ cart.goods.name }}</h4>
                                <ul class="weui-media-box__info ">
                                    <li class="weui-media-box__info__meta sub_title">¥ {{ cart.price }}</li>
                                    <li class="weui-media-box__info__meta r" style="color: #977a7a;" ></li>
                                </ul>
                                <p class="weui-media-box__desc sub_title" style="padding-top:5px;font-size:16px;">
                                    <span >
                                        <input type="button"  class="decrease input_length" value="-" >
                                        <input type="number" data-item="{{ cart.goods.id }}"  value="{{ cart.quantity }}" min="1" max="{{ cart.goods.stock_nums }}" class="number input_length" />
                                        <input type="button"  class="increase input_length" value="+" >
                                    </span>
                                    <span class="deleteitem r" data-item="{{ cart.goods.id }}"><i class="icon iconfont icon-delete2 color_red" style="font-weight: bold" ></i></span>
                                </p>
							</div>
                    </div>
                         <div class="weui-cells" id="plans-{{ cart.goods.id }}">
                          {% for plan in cart.get_goods_market_plans %}
                            <div class="weui-cell" id="plan-{{ cart.goods.id }}-{{ plan.id }}">
                                <div class="weui-cell__hd color_red"  ><B>{{plan.get_sale_type_display}}({{ plan.get_member_type_display }})</B>: </div>
                                <div class="weui-cell__bd " style="color:#000000;padding-left:5px;" >
                                    {% if plan.sale_type == 1 %}
                                        <p><a href="{{plan.present.get_absolute_url}}">{{ plan.present.name }} x {{plan.present_num}}</a></p>
                                    {% elif plan.sale_type == 2 %}
                                        <p>送券 <i class="color_red">{{ plan.ticket }}元</i></p>
                                    {% elif plan.sale_type == 3 %}
                                        {% if cart.get_discount %}
                                        <p>打<span id="dicount-{{ cart.goods.id }}-{{ plan.id }}">{{ cart.get_discount }}</span>折</p>
                                        {% endif %}
                                    {% endif %}
                                </div>
                            </div>
                           {% endfor %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <div class="weui-tabbar">
        <a href="#" class="weui-tabbar__item tabbar_item">
             <div class="weui-tabbar__label" style="color: black;">
                  <div class="price-total" ><span>总金额: <b id="total_price" data-price="0">¥0.00</b></span></div>
                 <div class="benefits" ><span>已优惠: <b id="benefits_price">¥0.00</b></span></div>
             </div>
        </a>
         <a href="javascript:;" class="weui-tabbar__item tabbar_item" id="gotopay">
            <p id="gotobuy" class="weui-tabbar__label bg_gray"><i class="icon iconfont icon-jiaoyi3" ></i> 去结算</p>
        </a>
    </div>
    </form>
{% endblock tab %}
{% block bottomjs %}

    {{ block.super }}
    <script type="application/javascript">

    $(function(){
        //购物车统计
        getShopCartCount();

        $("#gotobuy").on('click', function(){
            var prices = $("#total_price").attr('data-price');
            if( prices > 0)
                window.location.href = "{% url 'cart-buy-list' %}";
            else
                return false;
        });

        ///清空
        $("#clear_cart").on('click', function(event){
            var params ={
                 action: 'delall',
            }
            shopcartAction(params);
        });
        //全选
        $('#selectAll').on('click',function(event){
            obj = event.target;
            if($(obj).prop('checked')){
                $("input[name='checkid']").prop('checked', true);
                var params ={
                     action: 'checkall',
                     flag: 1,
                }
                shopcartAction( params );
            }
            else{
                $("input[name='checkid']").prop('checked', false);
                var params ={
                     action: 'checkall',
                     flag: 0,
                }
                shopcartAction( params );
            }

        });

        $("input[name='checkid']").on('click', function(event){

            goods_id = $(this).attr('data-item');
            if( $(this).prop('checked') ){
                var params ={
                     action: 'checkone',
                     goods_id: goods_id,
                     flag: 1 ,
                }
                shopcartAction( params ); ///选中
            }
            else{
                var params ={
                     action: 'checkone',
                     goods_id: goods_id,
                     flag: 0 ,
                }
                shopcartAction(params); ///未选中
            }

        });

        $(".deleteitem").on('click', function(event){
            goods_id = $(this).attr('data-item');
            var params ={
                 action: 'delone',
                 goods_id: goods_id,
            }
            shopcartAction( params );
            $('#item-'+goods_id).remove();
            $('#plans-'+goods_id).remove();
        });

        $('.decrease').click(function (e) {
            var $input = $(e.currentTarget).parent().find('.number');
            var goods_id = $input.attr("data-item");
            var number = parseInt($input.val() || "0") - 1
            if (number < 1) {
                number = 1;
                return;
            }
            $input.val(number);
            var params ={
                action: "itemupdate",
                goods_id: goods_id,
                number:number,
            }
            shopcartAction( params )
        });

        $('.increase').click(function (e) {
            var $input = $(e.currentTarget).parent().find('.number');
            var goods_id = $input.attr("data-item");
            var number = parseInt($input.val() || "0") + 1
            if (number > 99) {
                number = 99;
                return;
            }
            $input.val(number);
            var params ={
                action: "itemupdate",
                goods_id: goods_id,
                number:number,
            }
            shopcartAction( params )
        });

        $('.number').on('input',function(event){
            $input = $(event.currentTarget);
            var number = $input.val();
            var goods_id = $input.attr("data-item");
            if( number < 1){
                number = 1;
            }
            $input.val(number);
            var params ={
                action: "itemupdate",
                goods_id: goods_id,
                number: number,
            }
            shopcartAction( params )
        });


    });

    function getShopCartCount(){
         params ={
             action:'count',
         }
         $.ajax({
          type: 'GET',
          url: '{% url "shop-cart" %}',
          dataType: 'json',
          data: params,
          timeout: 5000,
          success: function(data){
              $('#total_price').text('¥' + data.price_totals.toFixed(2));
              $('#total_price').attr('data-price',data.price_totals);
              $('#benefits_price').text('¥' + data.benefits_totals.toFixed(2));
              if( data.price_totals == 0 ){
                  changeCss("bg_red","bg_gray");
              }
              else{
                  changeCss("bg_gray","bg_red");
              }
          },
          error: function(error){
              console.log(error);
          }
        });
    }

    function shopcartAction(params){

         params['csrfmiddlewaretoken'] ='{{ csrf_token }}';

         $.ajax({
          type: 'POST',
          url: '{% url "shop-cart" %}',
          dataType: 'json',
          data: params,
          timeout: 5000,
          success: function(data){
              if(data.action == "delall"){
                  //window.location.href = '{% url "shop-cart-list" %}'
                  $(".weui-media-box").remove();
                  $("#selectAll").prop('checked', false);
              }
              else if(data.action == "checkone" || data.action == "delone"){
                  if(data.check_state){
                      $("#selectAll").prop('checked', true);
                  }
                  else{
                      $("#selectAll").prop('checked', false);
                  }
              }

              $('#total_price').text('¥' + data.price_totals.toFixed(2));
              $('#total_price').attr('data-price',data.price_totals);
              $('#benefits_price').text('¥' + data.benefits_totals.toFixed(2));
{#              alert(JSON.stringify(data.discount));#}

              if( data.price_totals == 0 ){
                  changeCss("bg_red","bg_gray");
              }
              else{
                  changeCss("bg_gray","bg_red");
              }

          },
          error: function(error){
              console.log(error);
          }
        });

    }

    function changeCss(src,dst){
        $("#gotobuy").hasClass(src) && $("#gotobuy").removeClass(src);
        $("#gotobuy").addClass(dst);
    }
    </script>
{% endblock bottomjs %}
